<template>
	<view class="unio2o-page-has-bg">
		<view class="unio2o-jb-bg"></view>

		<view class="unio2o-coupon-detail unio2o-main">
			<view class="coupon-box bg-w box-shadow bdr16 pb40">
				<image class="logo" :src="coupon.store.logo"></image>
				<image class="coupon-type" :src="''"></image>
				<view class="coupon-main">
					<view class="ft14 text-center text-main">
						{{coupon.store.name}}
					</view>
					<view class="mt30 text-center text-main ft24 ftw600">{{coupon.title}}</view>

					<view class="flex center mt30">
						<view url="/pages/coupon/buy" style="width: 100%;" v-if="coupon.price > 0">
							<button class="btn-main ftw600 text-w">¥50 立即购买</button>
						</view>
						<view v-else>
							<button class="btn-dis ftw600 text-w" v-if="coupon.isUsed">已领取</button>
							<button class="btn-main ftw600 text-w" v-else>免费领取</button>
						</view>
					</view>
					<view class="mt30 flex space">
						<view class="ft14 text-main">已领：<text class="text-default ftw600">{{coupon.totalCount}}</text>
						</view>
						<view class="ft14 text-main">还剩：<text
								class="text-default ftw600">{{coupon.remainingCount}}</text></view>
					</view>
				</view>
				<view class="coupon-line mt30">
					<image :src="''"></image>
				</view>

				<view class="plr40 mt30">

					<view class="flex wrap">
						<view @click="showRole = true" class="coupon-tag-type mr20 mb30"
							v-for="(item,index) in coupon.tags" :key="index">{{item}} <text
								class="iconfont iconbtn_question ml10"></text></view>
					</view>
					<unio2o-coupon-alert @closed="showRole = false" :show="showRole"></unio2o-coupon-alert>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							使用期限
						</view>
						<view class="coupon-r pl10 ft16 text-info pl20">
							{{coupon.validFrom}} ~ {{coupon.validTo}}
						</view>
					</view>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							退订规则
						</view>
						<view class="coupon-r pl10 ft16 text-info pl20">
							付费券过期自动退款到余额
						</view>
					</view>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							券类型
						</view>
						<view class="coupon-r pl10 ft16 text-info pl20">
							{{coupon.name}}
						</view>
					</view>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							使用条件
						</view>
						<view class="coupon-r pl10 ft16 text-info pl20">
							<text v-if="coupon.minAmount > 0">满{{coupon.minAmount}}可用</text>
							<text v-else>无门槛</text>
						</view>
					</view>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							使用时间
						</view>
						<view class="coupon-r pl10 ft16 text-info pl20">
							{{coupon.timeRestrictions}}
						</view>
					</view>
					<view class="flex mt30">
						<view class="coupon-l ft16 ftw600 text-main">
							使用说明
						</view>
						<text class="coupon-r pl10 ft16 text-info pl20">
							{{coupon.useInstructions}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import unio2oCouponAlert from '@/components/module/coupon/roleAlert.vue';
	export default {
		components: {
			unio2oCouponAlert
		},
		data() {
			return {
				showRole: false,
				coupon: {
					id: null,
					name: "",
					type: 1,
					price: 0,
					amount: 0,
					minAmount: 0,
					discountRate: null,
					maxDiscount: null,
					title: "",
					description: "",
					validFrom: "",
					validTo: "",
					totalCount: 0,
					remainingCount: 0,
					isNewUser: true,
					isLimited: false,
					isExclusive: true,
					useScene: 1,
					useInstructions: "",
					categoryIds: [],
					productIds: [],
					isHot: true,
					sort: 4,
					background: "",
					tags: [],
					store: {
						id: 0,
						logo: '',
						name: '',
						distance: ''
					}
				}
			}
		},
		onLoad() {
			this.coupon = uni.getStorageSync('coupon')
			this.coupon.timeRestrictions = this.formatTimeRestrictions(this.coupon.timeRestrictions)
		},
		methods: {
			// 工具函数：格式化时间限制
			formatTimeRestrictions(timeRestrictions) {
				if (!timeRestrictions) return "无时间限制";

				const {
					type,
					timeSlots,
					weekdays,
					specificDates
				} = timeRestrictions;
				let result = "";

				// 处理时间段
				if (timeSlots && timeSlots.length > 0) {
					const timeTexts = timeSlots.map(slot => `${slot.startTime}-${slot.endTime}`).join("、");
					result += `${timeTexts} `;
				}

				// 处理星期几
				if (weekdays && weekdays.length > 0) {
					const weekdayMap = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					const weekdayTexts = weekdays.map(day => weekdayMap[day % 7]).join("、");

					if (weekdays.length === 7) {
						result += "（周一至周日）";
					} else {
						result += `（${weekdayTexts}）`;
					}
				}

				// 处理特定日期
				if (specificDates && specificDates.length > 0) {
					result += `${specificDates.join("、")}`;
				}

				return result;
			}
		}
	}
</script>

<style>
	.unio2o-coupon-detail {
		padding: 80rpx 30rpx 80rpx 30rpx;
	}

	.unio2o-coupon-detail .coupon-box {
		position: relative;
		min-height: 1000rpx;
	}

	.unio2o-coupon-detail .coupon-box .logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border: 4rpx solid #FFFFFF;
		position: absolute;
		left: calc(50% - 80rpx);
		top: -40rpx;
	}

	.unio2o-coupon-detail .coupon-type {
		position: absolute;
		left: 0;
		top: 0;
		width: 100rpx;
		height: 100rpx;
	}

	.unio2o-coupon-detail .coupon-main {
		padding-top: 142rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
	}

	.unio2o-coupon-detail .coupon-line {
		height: 34rpx;
		width: 100%;
	}

	.unio2o-coupon-detail .coupon-line image {
		height: 34rpx;
		width: 100%;
	}

	.unio2o-coupon-detail .coupon-tag-type {
		font-size: 28rpx;
		padding: 8rpx 20rpx;
		color: #FF6D00;
		border-radius: 28rpx;
		border: 2rpx solid #FF6D00;
	}

	.unio2o-coupon-detail .coupon-l {
		width: 140rpx;
	}

	.unio2o-coupon-detail .coupon-r {
		width: calc(100% - 140rpx);
	}
</style>